<template>
    <div>
        <div style="width: 100%;height: 2px;background-color: #14389a;"></div>
        <div class="header">
            <img src="../../assets/ic_skywheel.png"   style="height: 40px;border-radius: 50%;float: left; width: 40px; vertical-align: center;"/>
            <div class="box">
                <h4>
                    <!-- <dv-decoration-8 style="width:95px;height:30px; float: left;margin-top: 20px;"
                        :color="['#1c4fde', '#1c4fde']" /> -->
                    <img src="../../assets/img/xiezuo.png" style="float: left;" />
                    <div class="title">sky车载系统</div>
                    <img src="../../assets/img/xieyou.png" style="float: left;"/>
                    <!-- <dv-decoration-8 :reverse="true" style="width:95px;height:30px;float: left;margin-top: 20px;"
                        :color="['#1c4fde', '#1c4fde']" /> -->
                </h4>
                <div class="content">
                    <nav>
                        <router-link active-class="active" to="/index">首页</router-link>
                        <router-link active-class="active" to="/system">系统信息</router-link>
                        <router-link active-class="active" to="/vehicle">车辆信息</router-link>
                        <router-link active-class="active" to="/video">视频监控</router-link>
                    </nav>
                </div>
                <div class="name">
                    <img src="../../assets/name.png" style="height: 30px;border-radius: 50%;float: left; width: 30px; vertical-align: center;"/>
                    <div class="names">{{ name }}</div>
                </div>
            </div>
        </div>
        <div>

            <div style="width: 100%;height: 2px;float: left;background-color: #14389a;" ></div>
            <div style="width: 20%;height: 6px;margin-left:-6px;background-color: #14389a;transform: skew(107deg);"></div>
        </div>

        <div class="contents">
            <div class="content">
                <!--指定组件的位置-->
                <router-view></router-view>
            </div>
        </div>

    </div>
</template>

<script>

export default {
    name: "Customize_head",
    mounted() {
        this.name=localStorage.getItem("name")
    },
    data: function () {
        return {
            name:''
        }
    }
}



</script>

<style scoped>
.title{
    background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    float: left; 
}
.active {
    background-color: #042c11;
    box-shadow: 0 0 6px #8fc545;
    
}

.content {
    margin-left: 10%;
    line-height: 50px;
    text-align: center;

}
.name{
    margin-left: 20%;
    height: 30px ;
    
    text-align: center;
}
.names{
    
    float: left;
    width: 30px;
    height: 30px;
    font-size: 18px;
    
}
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    /* background-color: transparent; */
    color: #ffffff;
    /*吸顶效果*/
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    text-align: center;
}

.box {
    text-align: center;
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    margin-left: 1%;
}

h1 {
    display: flex;
    align-items: center;
    font: normal 28px Cookie, Arial, Helvetica, sans-serif;
    padding: 0px 20px;
}



nav a {
    padding: 14px 100px;
    width: 200px;
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: normal;
    height: 50px;
    

}

nav a:hover {
    opacity: 1;
}

.active {
    color: #608bd2;
    pointer-events: none;
    opacity: 1;
}
</style>
